<template>
    <div class="module-wrapper">
        <DataGrid
            :auto-load="autoLoad"
            row-key="id"
            border
            default-expand-all
            ref="dataGridRef"
            :pagination="false"
            :tree-props="treeProps"
        >
            <template #toolbar-search>
                <div class="query-from-box">
                    <el-form>
                        <el-form-item>
                            <el-input v-model="queryData.queryName" placeholder="模型名称/标识符" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.isComponent" placeholder="用途" clearable>
                                <el-option v-for="(value, key) in usageType" :label="value" :key="key" :value="key" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <template #toolbar-operation>
                <el-button type="primary" @click="onExport" :loading="exportLoading">导出</el-button>
                <el-button :icon="Guide" circle @click="$emit('changeMode')" />
            </template>
            <el-table-column type="index" label="序号" width="60" align="center" fixed />
            <el-table-column label="模型名称" width="300" fixed show-overflow-tooltip>
                <template #default="scope">
                    <el-button link type="primary" @click="onGopage(scope.row)"
                        >{{ scope.row.displayName
                        }}{{
                            detailData?.componentCount && !scope.$index ? `（${detailData?.componentCount}）` : ''
                        }}</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column prop="objectName" label="标识符" show-overflow-tooltip />
            <el-table-column prop="slot" label="槽号" />
            <el-table-column label="模型用途">
                <template #default="scope">
                    {{ usageType[scope.row.isComponent] }}
                </template>
            </el-table-column>
            <el-table-column label="模型性质">
                <template #default="scope">
                    {{ modifierType[scope.row.modifierType] }}
                </template>
            </el-table-column>
        </DataGrid>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { modelThingService } from '@great/services';
import { modifierType } from '@/utils/constant';
import { DataGrid, type DataGridInstance } from '@great/components';
import { useRouter } from 'vue-router';
import { checkPermi } from '@/utils/ruoyi';
import { Guide } from '@element-plus/icons-vue';

enum usageType {
    true = '组件',
    false = '产品'
}
const props = defineProps<{
    detailData?: Record<string, any>;
}>();
const $emit = defineEmits<{
    (e: 'changeMode'): void;
}>();
const router = useRouter();

const treeProps = reactive({
    children: 'components'
});
// 查询条件
const queryData = ref({
    objectName: props.detailData?.objectName,
    queryName: '',
    isComponent: null
});
const exportLoading = ref(false);
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async () => {
        const res = await modelThingService.getComponentList({
            ...queryData.value
        });
        return { data: res.data };
    }
});
const onGopage = row => {
    if (checkPermi(['model:thing:detail'])) {
        router.push({
            name: 'model-thing-detail',
            params: {
                id: row?.objectId
            }
        });
    }
};

// 导出
const onExport = () => {
    exportLoading.value = true;
    modelThingService
        .exportThingTsl({
            proObjectName: props.detailData?.objectName,
            thingQuery: ['EVENT', 'ACTION', 'ATTRIBUTE']
        })
        .then(() => {
            exportLoading.value = false;
        });
};
</script>
<style scoped lang="scss">
.module-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
}
</style>
